<script setup>
import PageSection from './PageSection.vue'

defineProps({
  active: Boolean,
})
</script>

<template>
  <PageSection :active :title="$t('menu.partners')" title-en="Partners" relative>
    <ul v-show="active" class="animate__animated animate__fadeInUp">
      <li>
        <!-- <img src="https://randomuser.me/api/portraits/women/18.jpg"> -->
      </li>
      <li>
        <!-- <img src="https://randomuser.me/api/portraits/women/2.jpg"> -->
      </li>
      <li>
        <!-- <img src="https://randomuser.me/api/portraits/women/3.jpg"> -->
      </li>
      <li>
        <!-- <img src="https://randomuser.me/api/portraits/women/4.jpg"> -->
      </li>
      <li>
        <!-- <img src="https://randomuser.me/api/portraits/women/5.jpg"> -->
      </li>
      <li>
        <!-- <img src="https://randomuser.me/api/portraits/women/6.jpg"> -->
      </li>
      <li>
        <!-- <img src="https://randomuser.me/api/portraits/women/7.jpg"> -->
      </li>
      <li>
        <!-- <img src="https://randomuser.me/api/portraits/women/8.jpg"> -->
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </PageSection>
</template>

<style scoped>
ul {
  --width: 230px;
  --height: 200px;
  --col-gap-base: calc(var(--width) / 2);
  --col-gap-base2n-right: calc(var(--width) / 4);
  --col-gap-base2n-left: calc(var(--width) / 4 * 3);
  --row-gap-base: calc(var(--height) / 2);
  --row-gap: 12px;
  --col-gap: 12px;

  width: 1180px;
  margin: 200px auto;
}
li {
  width: var(--width); /*20vw;*/
  height: var(--height); /*18vw;*/
  -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  float: left;
  margin-top: var(--row-gap);
  margin-right: calc(var(--col-gap-base) + var(--col-gap));
  background: turquoise;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
}
li:nth-child(2n) {
  /* margin: -100px -57.5px 0 -172.5px; */
  margin: calc(0px - var(--row-gap-base))
    calc(0px - var(--col-gap-base2n-right) + var(--col-gap)) 0
    calc(0px - var(--col-gap-base2n-left));
}
img {
  width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
</style>
